<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件审批</el-breadcrumb-item>
      <el-breadcrumb-item>文件草稿</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <el-button type="primary" @click="dialogVisible = true"
        >添加文件模板</el-button
      >
      <el-dialog
        title="文件上传"
        
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span>
          <el-upload
            class="upload-demo"
            action=""
            drag
            :http-request="uploadFile"
            multiple
            :limit="2"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-table
        border
        :data="
          filelist1.slice(
            (pageData.pageNum - 1) * pageData.pageSize,
            pageData.pageNum * pageData.pageSize
          )
        "
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="文件名" prop="name"></el-table-column>
        <el-table-column label="文件格式" prop="pattern"></el-table-column>
        <el-table-column
          label="发布时间"
          prop="installDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column label="文件下载">
          <template v-slot="scope" >
            <el-button size="small" type="text" @click="down(scope.row.url)">
                        <a>下载</a>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletefile(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.pageNum"
            :page-sizes="[10, 20, 25, 30]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
    </el-card>
  </div>
</template>

<script>
import { getformworkList,deleteFormwork,addFormwork} from "@/http/api";
export default {
  data() {
    return {
      filelist1: [],
      pageData: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
    };
  },
  created() {
    this.getfilelist1();
  },
  methods: {
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageData.pageSize = val;
        this.pageData.pageNum = 1;
        this.getfilelist1()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageData.pageNum = val;
        
      },
    //   文件上传
      uploadFile(params){
        const filename=params.file
        const formData = new FormData();
        formData.append('controllerId',localStorage.getItem('controllerId'))
        formData.append('status',1)
        formData.append('filename',filename.name)
        formData.append('file',filename)
        addFormwork(formData).then((res)=>{
            console.log(res)
            this.getfilelist1()
        })
      },
      //文件下载
      down(row){
        console.log(row)
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = this.$down_url + '/file' + row.split('/home/iaais')[1];
        console.log(link.href)
        document.body.appendChild(link);link.click();document.body.removeChild(link);
      },
      //删除提示
      openDelConfirm(name) {
      return this.$confirm(`此操作将删除 ${name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
      //文件删除
      deletefile(row){
        console.log(row)
        this.openDelConfirm(row.name).then(()=>{
            const data={
            id:row.id
        };
        deleteFormwork(data).then((res)=>{
            this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getfilelist1()
        })
        })
      },
    //时间格式化
    formatDate(row, column, cellValue, index) {
      let format = "YYYY-mm-dd HH:MM:SS";
      let date = new Date(cellValue);
      const dataItem = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString(),
        "d+": date.getDate().toString(),
        "H+": date.getHours().toString(),
        "M+": date.getMinutes().toString(),
        "S+": date.getSeconds().toString(),
      };
      Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
          format = format.replace(
            ret[1],
            ret[1].length === 1
              ? dataItem[item]
              : dataItem[item].padStart(ret[1].length, "0")
          );
        }
      });
      return format;
    },
    //获取文件草搞
    getfilelist1() {
      const data = {
        id: 1,
        controllerId: 1,
      };
      getformworkList(data).then((res) => {
        console.log(res);
        this.filelist1 = res.data.reverse();
        this.total = res.data.length;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
</style>